<template>
    <view class="teacher-page">
        <image class="teacher-page__bg" src="/static/images/bg/teacher.png" mode=""></image>
        <view class="teacher-page__button-group">
            <view class="teacher-page__button" v-for="item in list" :key="item.id" @click="onClick(item)">
                <image class="teacher-page__button-image" src="/static/images/btn/teacher.png"></image>
                <view class="teacher-page__button-label">{{item.name}}</view>
            </view>
            <view class="teacher-page__button">
                <image class="teacher-page__button-image" src="/static/images/btn/teacher.png"></image>
                <view class="teacher-page__button-label teacher-page__button-label-new">
                    <input class="teacher-page__input" type="text" v-model="name" placeholder="添加新的老师" />
                    <view class="teacher-page__button-label-btn" @click="onClick({name})">提交</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            name: '',
            list: [
                {
                    id: 1,
                    name: '加载中...',
                },
            ],
        };
    },
    created() {
        uni.request({
            url: getApp().globalData.baseUrl + 'static/php/teacher.php?id=' + this.$route.query.id,
            success: (res) => {
                this.list = res.data.list;
            },
        });
    },
    methods: {
        onClick(item) {
            this.$store.commit('saveTeacher', item.name);
            uni.navigateTo({
                url: `../score/score?data=${this.$store.getters.data}`,
            });
        },
    },
}
</script>

<style lang="scss">
.teacher-page {
    &__bg {
        width: 100vw;
        height: imageSize(100vw, 750, 1445);
    }
    &__button-group {
        position: absolute;
        top: 45vw;
    }
    &__button {
        text-align: center;
        position: relative;
        float: left;
    }
    &__button-image {
        width: 100vw;
        height: imageSize(100vw, 724, 143);
    }
    &__button-label {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 35upx;
        font-weight: bolder;
        color: #124a8e;
        &-new {
            display: flex;
        }
        &-btn {
            flex-shrink: 0;
        }
    }
}
</style>